<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  reportData: {
    out: { count: number; num: number; money: number };
    in: { count: number; num: number; money: number };
    sellBuy: { count: number; num: number; money: number; profit: number };
    purchase: { count: number; num: number; money: number };
  };
}

const props = withDefaults(defineProps<Props>(), {
  reportData: () => ({
    out: { count: 0, num: 0, money: 0 },
    in: { count: 0, num: 0, money: 0 },
    sellBuy: { count: 0, num: 0, money: 0, profit: 0 },
    purchase: { count: 0, num: 0, money: 0 }
  })
});

const statsData = computed(() => [
  {
    title: '今日出库',
    value: props.reportData.out.money,
    count: props.reportData.out.count,
    icon: 'ant-design:export-outlined',
    color: 'text-red-600',
    bgColor: 'bg-red-50',
    trend: '+12%'
  },
  {
    title: '今日入库',
    value: props.reportData.in.money,
    count: props.reportData.in.count,
    icon: 'ant-design:import-outlined',
    color: 'text-green-600',
    bgColor: 'bg-green-50',
    trend: '+8%'
  },
  {
    title: '今日销售',
    value: props.reportData.sellBuy.money,
    count: props.reportData.sellBuy.count,
    icon: 'ant-design:shopping-outlined',
    color: 'text-blue-600',
    bgColor: 'bg-blue-50',
    trend: '+15%'
  },
  {
    title: '今日采购',
    value: props.reportData.purchase.money,
    count: props.reportData.purchase.count,
    icon: 'ant-design:shopping-cart-outlined',
    color: 'text-purple-600',
    bgColor: 'bg-purple-50',
    trend: '+3%'
  }
]);
</script>

<template>
  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
    <div
      v-for="item in statsData"
      :key="item.title"
      class="border border-gray-200 rounded-lg bg-white p-4 transition-shadow hover:shadow-md"
    >
      <div class="flex items-center justify-between">
        <div class="h-10 w-10 flex items-center justify-center rounded-lg" :class="[item.bgColor]">
          <SvgIcon :icon="item.icon" class="h-5 w-5" :class="[item.color]" />
        </div>
        <div class="rounded-full px-2 py-1 text-xs font-medium" :class="[item.bgColor, item.color]">
          {{ item.trend }}
        </div>
      </div>

      <div class="mt-3">
        <div class="mb-1 text-xs text-gray-500">{{ item.title }}</div>
        <div class="mb-1 text-xl text-gray-900 font-bold">￥{{ item.value }}</div>
        <div class="text-xs text-gray-400">{{ item.count }} 笔交易</div>
      </div>
    </div>
  </div>
</template>
